<%@ page language="java" import="java.util.*" contentType="text/html;charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html class="app">
<head>  
  <meta charset="utf-8" />
  <title>Musik | Web Application</title>
  <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="stylesheet" href="js/jPlayer/jplayer.flat.css" type="text/css" />
  <link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="css/animate.css" type="text/css" />
  <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
  <link rel="stylesheet" href="css/simple-line-icons.css" type="text/css" />
  <link rel="stylesheet" href="css/font.css" type="text/css" />
  <link rel="stylesheet" href="css/app.css" type="text/css" />

  <style>
    .userMyLike,.userMyPlaylist,.userMyFocus,singerID{
      height: 50px;
      width: 100%;
    }
    .iLike li{
      list-style: none;
      float: left;
      font-size: 16px;
    }
    header .nav-white :hover{
      font-size: 20px;
    }
    .addPlaylist{
      text-align: center;
      font-size: 26px;
      border: black 1px solid;
      height: 300px;
      width: 600px;
      position: absolute;z-index:10;
      top: 20%;
      left: 20%;
      background-color: rgba(0,0,0,.1);
    }
    input{
      width: 40%;
      height: 43px;
    }
    .confirm:hover{
      color: #90EE90;
    }
    .cancel:hover{
      color: #90EE90;
    }
  </style>
  
  <!--[if lt IE 9]>
    <script src="js/ie/html5shiv.js"></script>
    <script src="js/ie/respond.min.js"></script>
    <script src="js/ie/excanvas.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script>

  <![endif]-->
</head>
<body class="">
  <section class="vbox">
    <header class="bg-white-only header header-md navbar navbar-fixed-top-xs">
      <div class="navbar-header aside bg-info dk">
        <a class="btn btn-link visible-xs" data-toggle="class:nav-off-screen,open" data-target="#nav,html">
          <i class="icon-list"></i>
        </a>
        <a style="height: 60px" href="index.jsp" class="navbar-brand text-lt">
          <i style="line-height: 60px" class="icon-earphones"></i>
          <img src="images/logo.png" alt="." class="hide">
          <span class="hidden-nav-xs m-l-sm">Monster</span>
        </a>
        <a class="btn btn-link visible-xs" data-toggle="dropdown" data-target=".user">
          <i class="icon-settings"></i>
        </a>
      </div>      <ul class="nav navbar-nav hidden-xs">
        <li>
          <a href="#nav,.navbar-header" data-toggle="class:nav-xs,nav-xs" class="text-muted">
            <i class="fa fa-indent text"></i>
            <i class="fa fa-dedent text-active"></i>
          </a>
        </li>
      </ul>
      <form class="navbar-form navbar-left input-s-lg m-t m-l-n-xs hidden-xs" role="search">
        <div class="form-group">
          <div class="input-group">
            <span class="input-group-btn">
              <button type="submit" class="btn btn-sm bg-white btn-icon rounded"><i class="fa fa-search"></i></button>
            </span>
            <input type="text" class="form-control input-sm no-border rounded" placeholder="Search songs, albums...">
          </div>
        </div>
      </form>
      <div class="navbar-right ">
        <ul class="nav navbar-nav m-n hidden-xs nav-user user">
          <li class="hidden-xs">
            <a href="#" class="dropdown-toggle lt" data-toggle="dropdown">
              <i class="icon-bell"></i>
              <span class="badge badge-sm up bg-danger count">2</span>
            </a>
            <section class="dropdown-menu aside-xl animated fadeInUp">
              <section class="panel bg-white">
                <div class="panel-heading b-light bg-light">
                  <strong>You have <span class="count">2</span> notifications</strong>
                </div>
                <div class="list-group list-group-alt">
                  <a href="#" class="media list-group-item">
                    <span class="pull-left thumb-sm">
                      <img src="images/a0.png" alt="..." class="img-circle">
                    </span>
                    <span class="media-body block m-b-none">
                      Use awesome animate.css<br>
                      <small class="text-muted">10 minutes ago</small>
                    </span>
                  </a>
                  <a href="#" class="media list-group-item">
                    <span class="media-body block m-b-none">
                      1.0 initial released<br>
                      <small class="text-muted">1 hour ago</small>
                    </span>
                  </a>
                </div>
                <div class="panel-footer text-sm">
                  <a href="#" class="pull-right"><i class="fa fa-cog"></i></a>
                  <a href="#notes" data-toggle="class:show animated fadeInRight">See all the notifications</a>
                </div>
              </section>
            </section>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle bg clear" data-toggle="dropdown">
              <span class="thumb-sm avatar pull-right m-t-n-sm m-b-n-sm m-l-sm">
                <img src="${user.head}" alt="...">
              </span>
              用户名 <b class="caret"></b>
            </a>
            <ul class="dropdown-menu animated fadeInRight">            
         <!--     <li>
                <span class="arrow top"></span>
                <a href="#">设置</a>
              </li>-->
              <li>
                <a href="index.jsp">首页</a>
              </li>
              <li>
                <a href="#">
                  <%--<span class="badge bg-danger pull-right">3</span>--%>
                  设置
                </a>
              </li>
             <!-- <li>
                <a href="docs.html">帮助</a>
              </li>-->
              <li class="divider"></li>
              <li class="btn-logout">
                <a href="#" data-toggle="ajaxModal">退出登录</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>      
    </header>
    <section>
      <section class="hbox stretch">
        <!-- .aside -->
        <aside class="bg-black dk aside hidden-print" id="nav">          
          <section class="vbox">
            <section class="w-f-md scrollable">
              <div class="slim-scroll" data-height="auto" data-disable-fade-out="true" data-distance="0" data-size="10px" data-railOpacity="0.2">
                


                <!-- nav -->                 
                <nav class="nav-primary hidden-xs">
                  <ul class="nav bg clearfix">
                    <li class="hidden-nav-xs padder m-t m-b-sm text-xs text-muted">
                      Discover
                    </li>
                    <li>
                      <a href="index.jsp">
                        <i class="icon-disc icon text-success"></i>
                        <span class="font-bold">首页</span>
                      </a>
                    </li>
                    <li>
                      <a href="genres.html">
                        <i class="icon-music-tone-alt icon text-info"></i>
                        <span class="font-bold">歌手</span>
                      </a>
                    </li>
                    <li>
                      <a href="AlbumPageServlet?page=1&opr=showAll">
                        <i class="icon-drawer icon text-primary-lter"></i>
                        <b class="badge bg-primary pull-right">6</b>
                        <span class="font-bold">专辑</span>
                      </a>
                    </li>
                    <li>
                      <a href="playlistServlet">
                        <i class="icon-list icon  text-info-dker"></i>
                        <span class="font-bold">分类歌单</span>
                      </a>
                    </li>
                    <li>
                      <a href="video.html" data-target="#content" data-el="#bjax-el" data-replace="true">
                        <i class="icon-social-youtube icon  text-primary"></i>
                        <span class="font-bold">听歌</span>
                      </a>
                    </li>
                    <li class="m-b hidden-nav-xs"></li>
                  </ul>
                  <ul class="nav" data-ride="collapse">
                    <li class="hidden-nav-xs padder m-t m-b-sm text-xs text-muted">
                      Interface
                    </li>
                    <li >
                      <a href="#" class="auto">
                        <span class="pull-right text-muted">
                          <i class="fa fa-angle-left text"></i>
                          <i class="fa fa-angle-down text-active"></i>
                        </span>
                        <i class="icon-screen-desktop icon">
                        </i>
                        <span>Layouts</span>
                      </a>
                      <ul class="nav dk text-sm">
                        <li >
                          <a href="layout-color.html" class="auto">                                                        
                            <i class="fa fa-angle-right text-xs"></i>

                            <span>Color option</span>
                          </a>
                        </li>
                        <li >
                          <a href="layout-boxed.html" class="auto">                                                        
                            <i class="fa fa-angle-right text-xs"></i>

                            <span>Boxed layout</span>
                          </a>
                        </li>
                        <li >
                          <a href="layout-fluid.html" class="auto">                                                        
                            <i class="fa fa-angle-right text-xs"></i>

                            <span>Fluid layout</span>
                          </a>
                        </li>
                      </ul>
                    </li>
                    <li >
                      <a href="#" class="auto">
                        <span class="pull-right text-muted">
                          <i class="fa fa-angle-left text"></i>
                          <i class="fa fa-angle-down text-active"></i>
                        </span>
                        <i class="icon-chemistry icon">
                        </i>
                        <span>UI Kit</span>
                      </a>
                      <ul class="nav dk text-sm">
                        <li >
                          <a href="buttons.html" class="auto">                                                        
                            <i class="fa fa-angle-right text-xs"></i>

                            <span>Buttons</span>
                          </a>
                        </li>
                        <li >
                          <a href="icons.html" class="auto">                            
                            <b class="badge bg-info pull-right">369</b>                                                        
                            <i class="fa fa-angle-right text-xs"></i>

                            <span>Icons</span>
                          </a>
                        </li><li >
                          <a href="http://www.weidea.net" class="auto">                            
                            <b class="badge bg-info pull-right">369</b>                                                        
                            <i class="fa fa-angle-right text-xs"></i>

                            <span>More</span>
                          </a>
                        </li>
                        <li >
                          <a href="grid.html" class="auto">                                                        
                            <i class="fa fa-angle-right text-xs"></i>

                            <span>Grid</span>
                          </a>
                        </li>
                        <li >
                          <a href="widgets.html" class="auto">                            
                            <b class="badge bg-dark pull-right">8</b>                                                        
                            <i class="fa fa-angle-right text-xs"></i>

                            <span>Widgets</span>
                          </a>
                        </li>
                        <li >
                          <a href="components.html" class="auto">                                                        
                            <i class="fa fa-angle-right text-xs"></i>

                            <span>Components</span>
                          </a>
                        </li>
                        <li >
                          <a href="list.html" class="auto">                                                        
                            <i class="fa fa-angle-right text-xs"></i>

                            <span>List group</span>
                          </a>
                        </li>
                        <li >
                          <a href="#table" class="auto">                            
                            <span class="pull-right text-muted">
                              <i class="fa fa-angle-left text"></i>
                              <i class="fa fa-angle-down text-active"></i>
                            </span>                            
                            <i class="fa fa-angle-right text-xs"></i>

                            <span>Table</span>
                          </a>
                          <ul class="nav dker">
                            <li >
                              <a href="table-static.html">
                                <i class="fa fa-angle-right"></i>
                                <span>Table static</span>
                              </a>
                            </li>
                            <li >
                              <a href="table-datatable.html">
                                <i class="fa fa-angle-right"></i>
                                <span>Datatable</span>
                              </a>
                            </li>
                          </ul>
                        </li>
                        <li >
                          <a href="#form" class="auto">                            
                            <span class="pull-right text-muted">
                              <i class="fa fa-angle-left text"></i>
                              <i class="fa fa-angle-down text-active"></i>
                            </span>                            
                            <i class="fa fa-angle-right text-xs"></i>

                            <span>Form</span>
                          </a>
                          <ul class="nav dker">
                            <li >
                              <a href="form-elements.html">
                                <i class="fa fa-angle-right"></i>
                                <span>Form elements</span>
                              </a>
                            </li>
                            <li >
                              <a href="form-validation.html">
                                <i class="fa fa-angle-right"></i>
                                <span>Form validation</span>
                              </a>
                            </li>
                            <li >
                              <a href="form-wizard.html">
                                <i class="fa fa-angle-right"></i>
                                <span>Form wizard</span>
                              </a>
                            </li>
                          </ul>
                        </li>
                        <li >
                          <a href="chart.html" class="auto">                                                        
                            <i class="fa fa-angle-right text-xs"></i>

                            <span>Chart</span>
                          </a>
                        </li>
                        <li >
                          <a href="portlet.html" class="auto">                                                        
                            <i class="fa fa-angle-right text-xs"></i>

                            <span>Portlet</span>
                          </a>
                        </li>
                        <li >
                          <a href="timeline.html" class="auto">                                                        
                            <i class="fa fa-angle-right text-xs"></i>

                            <span>Timeline</span>
                          </a>
                        </li>
                      </ul>
                    </li>
                    <li  class="active">
                      <a href="#" class="auto">
                        <span class="pull-right text-muted">
                          <i class="fa fa-angle-left text"></i>
                          <i class="fa fa-angle-down text-active"></i>
                        </span>
                        <i class="icon-grid icon">
                        </i>
                        <span>Pages</span>
                      </a>
                      <ul class="nav dk text-sm">
                        <li  class="active">
                          <a href="profile.jsp" class="auto">
                            <i class="fa fa-angle-right text-xs"></i>

                            <span>Profile</span>
                          </a>
                        </li>
                        <li >
                          <a href="blog.html" class="auto">                                                        
                            <i class="fa fa-angle-right text-xs"></i>

                            <span>Blog</span>
                          </a>
                        </li>
                        <li >
                          <a href="invoice.html" class="auto">                                                        
                            <i class="fa fa-angle-right text-xs"></i>

                            <span>Invoice</span>
                          </a>
                        </li>
                        <li >
                          <a href="gmap.html" class="auto">                                                        
                            <i class="fa fa-angle-right text-xs"></i>

                            <span>Google Map</span>
                          </a>
                        </li>
                        <li >
                          <a href="jvectormap.html" class="auto">                                                        
                            <i class="fa fa-angle-right text-xs"></i>

                            <span>Vector Map</span>
                          </a>
                        </li>
                        <li >
                          <a href="signin.html" class="auto">                                                        
                            <i class="fa fa-angle-right text-xs"></i>

                            <span>Signin</span>
                          </a>
                        </li>
                        <li >
                          <a href="signup.html" class="auto">                                                        
                            <i class="fa fa-angle-right text-xs"></i>

                            <span>Signup</span>
                          </a>
                        </li>
                        <li >
                          <a href="404.html" class="auto">                                                        
                            <i class="fa fa-angle-right text-xs"></i>

                            <span>404</span>
                          </a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                  <ul class="nav text-sm">
                    <li class="hidden-nav-xs padder m-t m-b-sm text-xs text-muted">
                      <span class="pull-right"><a href="#"><i class="icon-plus i-lg"></i></a></span>
                      Playlist
                    </li>
                    <li>
                      <a href="#">
                        <i class="icon-music-tone icon"></i>
                        <span>Hip-Pop</span>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <i class="icon-playlist icon text-success-lter"></i>
                        <b class="badge bg-success dker pull-right">9</b>
                        <span>Jazz</span>
                      </a>
                    </li>
                  </ul>
                </nav>
                <!-- / nav -->
              </div>
            </section>
            
            <footer class="footer hidden-xs no-padder text-center-nav-xs">
              <div class="bg hidden-xs ">
                  <div class="dropdown dropup wrapper-sm clearfix">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                      <span class="thumb-sm avatar pull-left m-l-xs">                        
                        <img src="images/a3.png" class="dker" alt="...">
                        <i class="on b-black"></i>
                      </span>
                      <span class="hidden-nav-xs clear">
                        <span class="block m-l">
                          <strong class="font-bold text-lt">John.Smith</strong> 
                          <b class="caret"></b>
                        </span>
                        <span class="text-muted text-xs block m-l">Art Director</span>
                      </span>
                    </a>
                    <ul class="dropdown-menu animated fadeInRight aside text-left">                      
                      <li>
                        <span class="arrow bottom hidden-nav-xs"></span>
                        <a href="#">Settings</a>
                      </li>
                      <li>
                        <a href="profile.jsp">Profile</a>
                      </li>
                      <li>
                        <a href="#">
                          <span class="badge bg-danger pull-right">3</span>
                          Notifications
                        </a>
                      </li>
                      <li>
                        <a href="docs.html">Help</a>
                      </li>
                      <li class="divider"></li>
                      <li>
                        <a href="modal.lockme.html" data-toggle="ajaxModal" >Logout</a>
                      </li>
                    </ul>
                  </div>
                </div>            </footer>
          </section>
        </aside>
        <!-- /.aside -->
        <section id="content">
          <section class="vbox">
            <section class="scrollable">
              <section class="hbox stretch">
                <aside class="aside-lg bg-light lter b-r">
                  <section class="vbox">
                    <section class="scrollable">
                      <div class="wrapper">
                        <div class="text-center m-b m-t">
                          <a href="#" class="thumb-lg">
                            <img src="${user.head}" class="img-circle">
                          </a>
                          <div>
                            <div class="h3 m-t-xs m-b-xs">${user.name}</div>
                            <small class="text-muted"><i class="fa fa-map-marker"></i></small>
                          </div>                
                        </div>
                        <div class="panel wrapper">
                          <div class="row text-center">
                            <div class="col-xs-6">
                              <a href="#">
                                <span class="m-b-xs h4 block">${user.fans}</span>
                                <small class="text-muted">粉丝</small>
                              </a>
                            </div>
                            <div class="col-xs-6">
                              <a href="#">
                                <span class="m-b-xs h4 block">${user.follow}</span>
                                <small class="text-muted">关注</small>
                              </a>
                            </div>
                          </div>
                        </div>
                        <div class="btn-group btn-group-justified m-b">
                          <a class="btn btn-success btn-rounded" data-toggle="button">
                            <span class="text">
                              <i class="fa fa-eye"></i> 关注
                            </span>
                            <span class="text-active">
                              <i class="fa fa-eye"></i> 取消关注
                            </span>
                          </a>
                          <a class="btn btn-dark btn-rounded">
                            <i class="fa fa-comment-o"></i> 聊天
                          </a>
                        </div>
                        <div>
                          <small class="text-uc text-xs text-muted">关于我：</small>
                          <p>Artist</p>
                          <small class="text-uc text-xs text-muted">个性签名：</small>
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Aliquam sollicitudin venenatis ipsum ac feugiat.</p>
                          <div class="line"></div>
                          <small class="text-uc text-xs text-muted">connection</small>
                          <p class="m-t-sm">
                            <a href="#" class="btn btn-rounded btn-twitter btn-icon"><i class="fa fa-twitter"></i></a>
                            <a href="#" class="btn btn-rounded btn-facebook btn-icon"><i class="fa fa-facebook"></i></a>
                            <a href="#" class="btn btn-rounded btn-gplus btn-icon"><i class="fa fa-google-plus"></i></a>
                          </p>
                        </div>
                      </div>
                    </section>
                  </section>
                </aside>
                <aside class="bg-white">
                  <section class="vbox">
                    <header class="header bg-light lt">
                      <ul class=" nav nav-tabs nav-white">
                        <li class="active myLike"><a href="#activity" data-toggle="tab">我喜欢</a></li>
                        <li class="myPlaylist"><a href="#events" data-toggle="tab">我创建的歌单</a></li>
                        <li class="myFocus"><a href="#interaction" data-toggle="tab">关注</a></li>
                      </ul>
                    </header>
                    <section class="scrollable">
                      <div class="userMyLike" style="display: none">
                        <ul class="iLike">
                          <li class="songClass"><a href="#activity" data-toggle="tab">歌曲&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                          <li class="playlistClass"><a href="#activity" data-toggle="tab">歌单&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                          <li class="albumClass"><a href="#activity" data-toggle="tab">专辑&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                        </ul>
                      </div>
                        <c:forEach items="${songsList}" var="songsList" varStatus="songID">
                        <div class="tab-content" value="${songID.index}">
                            <div class="tab-pane active songIDValue userSongs" id="activity" style="display: block" userSongsId="${songsList.songId}">
                                <ul class="list-group no-radius m-b-none m-t-n-xxs list-group-lg no-border">
                                    <li class="list-group-item">
                                        <a href="#" class="thumb-sm pull-left m-r-sm">
                                            <img src="${songsList.poster}" class="img-circle">
                                        </a>
                                        <a href="#" class="clear">
                                            <small class="pull-right">时长：${songsList.time}</small>
                                            <strong class="block">${songsList.songName}</strong>
                                            <c:forEach items="${songsList.singers}" var="singers">
                                                <small>${singers.singerName}</small>
                                            </c:forEach>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </c:forEach>
                        <c:forEach items="${userPlaylists}" var="userPlaylists" varStatus="userPalylist">
                          <div id="userPlaylist" class="palylist" style="display: none" playlistId="${userPlaylists.playlistId}">
                            <ul class="list-group no-radius m-b-none m-t-n-xxs list-group-lg no-border">
                              <li class="list-group-item">
                                <a href="#" class="thumb-sm pull-left m-r-sm">
                                  <img src="${userPlaylists.playlistPoster}" class="img-circle">
                                </a>
                                <a href="#" class="clear">
                                  <small class="pull-right">歌曲(${userPlaylists.songCount})</small>
                                  <strong class="block">${userPlaylists.playlistName}</strong>
                                  <small>播放量:${userPlaylists.playlistPlaycount}</small>
                                </a>
                              </li>
                            </ul>
                          </div>
                        </c:forEach>
                        <c:forEach items="${userAlbumLists}" var="userAlbumLists">
                          <div class="album userAlbum" style="display: none" userAlbumId="${userAlbumLists.albumId}">
                            <ul class="list-group no-radius m-b-none m-t-n-xxs list-group-lg no-border">
                              <li class="list-group-item">
                                <a href="#" class="thumb-sm pull-left m-r-sm">
                                  <img src="${userAlbumLists.albumPoster}" class="img-circle">
                                </a>
                                <a href="#" class="clear">
                                  <small class="pull-right">歌曲(${userAlbumLists.songCount})</small>
                                  <strong class="block">${userAlbumLists.albumName}</strong>
                                  <small>热度:${userAlbumLists.albumHot}</small>
                                </a>
                              </li>
                            </ul>
                          </div>
                        </c:forEach>

                          <div class="text-center wrapper setPlaylist" style="display: none">
                            <ul class="iLike">
                              <li class="add" style="border: #2ad980 1px solid"><a href="#" data-toggle="tab">＋新建歌单&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                            </ul>
                          </div>
                        <div class="tab-pane userMyPlaylist" id="events" style="display: none">

                          <div class="addPlaylist" style="display: none">
                            <h2 style="color: red;margin-top: 70px">添加歌单</h2>
                            <form name="form" method="post">
                              <p style="color: #000  ;display: inline">请输入歌单名：</p><input type="text" name="playlistName" required="required">
                            </form>
                            <button style="color: black" class="confirm">确定</button> <button style="color: black" class="cancel">取消</button>
                          </div>
                          <c:forEach items="${userSetPlaylist}" var="userSetPlaylist">
                            <div class="setPlaylist mySetPlaylist" style="display: block" mySetPlaylistId="${userSetPlaylist.playlistId}">
                              <ul class="playlist-item list-group no-radius m-b-none m-t-n-xxs list-group-lg no-border">
                                <li class="list-group-item">
                                  <a href="#" class="thumb-sm pull-left m-r-sm">
                                    <img src="${userSetPlaylist.playlistPoster}" class="img-circle">
                                  </a>
                                  <a href="#" class="clear">
                                    <small class="pull-right">歌曲(${userSetPlaylist.songCount})</small>
                                    <strong class="block">${userSetPlaylist.playlistName}</strong>
                                    <small>播放量:${userSetPlaylist.playlistPlaycount}</small>
                                  </a>
                                </li>
                              </ul>
                            </div>
                          </c:forEach>
                        </div>
                        <div class="tab-pane" id="interaction">
                          <div class="text-center wrapper userMyFocus" style="display: none">
                              <ul class="iLike">
                                  <li class="userClass"><a href="#" data-toggle="tab">用户&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                                  <li class="singerClass"><a href="#" data-toggle="tab">歌手&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                              </ul>
                          </div>
                          <c:forEach items="${userFocusSinger}" var="userFocusSinger">
                            <div class="singerID focusSinger" style="display: none" focusSingerId="${userFocusSinger.singerId}">
                              <ul class="list-group no-radius m-b-none m-t-n-xxs list-group-lg no-border">
                                <li class="list-group-item">
                                  <a href="#" class="thumb-sm pull-left m-r-sm">
                                    <img src="${userFocusSinger.poster}" class="img-circle">
                                  </a>
                                  <a href="#" class="clear">
                                    <small class="pull-right">关注度:${userFocusSinger.hot}</small>
                                    <strong class="block">${userFocusSinger.singerName}</strong>
                                    <small>${userFocusSinger.sex}</small>
                                  </a>
                                </li>
                              </ul>
                            </div>
                          </c:forEach>
                          <c:forEach items="${userFocusUser}" var="userFocusUser">
                            <div class="userID" style="display: none">
                              <ul class="list-group no-radius m-b-none m-t-n-xxs list-group-lg no-border">
                                <li class="list-group-item">
                                  <a href="#" class="thumb-sm pull-left m-r-sm">
                                    <img src="${userFocusUser.head}" class="img-circle">
                                  </a>
                                  <a href="#" class="clear">
                                    <small class="pull-right">关注度:${userFocusUser.follow}</small>
                                    <strong class="block">${userFocusUser.name}</strong>
                                    <small>&nbsp;</small>
                                  </a>
                                </li>
                              </ul>
                            </div>
                          </c:forEach>

                        </div>
                      </div>
                    </section>
                  </section>
                </aside>
                <aside class="col-lg-3 b-l">
                  <section class="vbox">
                    <section class="scrollable padder-v">
                      <div class="panel">
                        <h4 class="font-thin padder">Latest Tweets</h4>
                        <ul class="list-group">
                          <li class="list-group-item">
                              <p>Wellcome <a href="#" class="text-info">@Drew Wllon</a> and play this web application template, have fun1 </p>
                              <small class="block text-muted"><i class="fa fa-clock-o"></i> 2 minuts ago</small>
                          </li>
                          <li class="list-group-item">
                              <p>Morbi nec <a href="#" class="text-info">@Jonathan George</a> nunc condimentum ipsum dolor sit amet, consectetur</p>
                              <small class="block text-muted"><i class="fa fa-clock-o"></i> 1 hour ago</small>
                          </li>
                          <li class="list-group-item">                     
                              <p><a href="#" class="text-info">@Josh Long</a> Vestibulum ullamcorper sodales nisi nec adipiscing elit. Morbi id neque quam. Aliquam sollicitudin venenatis</p>
                              <small class="block text-muted"><i class="fa fa-clock-o"></i> 2 hours ago</small>
                          </li>
                        </ul>
                      </div>
                      <div class="panel clearfix">
                        <div class="panel-body">
                          <a href="#" class="thumb pull-left m-r">
                            <img src="images/a0.png" class="img-circle">
                          </a>
                          <div class="clear">
                            <a href="#" class="text-info">@Mike Mcalidek <i class="fa fa-twitter"></i></a>
                            <small class="block text-muted">2,415 followers / 225 tweets</small>
                            <a href="#" class="btn btn-xs btn-success m-t-xs">Follow</a>
                          </div>
                        </div>
                      </div>
                    </section>
                  </section>              
                </aside>
              </section>
            </section>
          </section>
          <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen,open" data-target="#nav,html"></a>
        </section>
      </section>
    </section>    
  </section>
  <script src="js/jquery.min.js"></script>
  <!-- Bootstrap -->
  <script src="js/bootstrap.js"></script>
  <!-- App -->
  <script src="js/app.js"></script>  
  <script src="js/slimscroll/jquery.slimscroll.min.js"></script>
  <script src="js/charts/easypiechart/jquery.easy-pie-chart.js"></script>
  <script src="js/app.plugin.js"></script>
  <script type="text/javascript" src="js/jPlayer/jquery.jplayer.min.js"></script>
  <script type="text/javascript" src="js/jPlayer/add-on/jplayer.playlist.min.js"></script>
  <script type="text/javascript" src="js/jPlayer/demo.js"></script>
</body>
</html>

<script>
    $(document).ready(function () {
        $(".myLike").click(function () {
            $(".userMyLike").toggle();
            $(".userMyPlaylist").hide();
            $(".userMyFocus").hide();
            $(".palylist").hide();
            $(".songIDValue").show();
            $(".album").hide();
            $(".userID").hide();
            $(".singerID").hide();
          $(".setPlaylist").hide();
        });
        $(".btn-logout").click(function () {
            $.post("/user/logout", function () {
                location.href = "index.jsp";
            })
        })
        $(".myPlaylist").click(function () {
            $(".userMyPlaylist").toggle();
            $(".userMyLike").hide();
            $(".userMyFocus").hide();
            $(".palylist").hide();
            $(".songIDValue").hide();
            $(".album").hide();
            $(".userID").hide();
            $(".singerID").hide();
            $(".setPlaylist").show();
        });
    });
    $(document).ready(function () {
        $(".myFocus").click(function () {
            $(".userMyFocus").toggle();
            $(".userMyLike").hide();
            $(".userMyPlaylist").hide();
            $(".palylist").hide();
            $(".songIDValue").hide();
            $(".album").hide();
            $(".userID").hide();
            $(".singerID").show();
            $(".setPlaylist").hide();
        })
    });
    $(document).ready(function () {
        $(".songClass").click(function () {
            $(".songIDValue").show();
            $(".palylist").hide();
            $(".album").hide();
          $(".setPlaylist").hide();
        });
    });
    $(document).ready(function () {
        $(".playlistClass").click(function () {
            $(".palylist").show();
            $(".songIDValue").hide();
            $(".album").hide();
          $(".setPlaylist").hide();
        });
    });
    $(document).ready(function () {
        $(".albumClass").click(function () {
            $(".album").show();
            $(".palylist").hide();
            $(".songIDValue").hide();
          $(".setPlaylist").hide();
        });
    });
    $(document).ready(function () {
        $(".userClass").click(function () {
            $(".userID").show();
            $(".singerID").hide();
        });
    });
    $(document).ready(function () {
        $(".singerClass").click(function () {
            $(".singerID").show();
            $(".userID").hide();
        });
    });

    $(document).ready(function () {
      $(".add").click(function () {
        $(".addPlaylist").show();
      })
    })
    $(document).ready(function () {
      $(".cancel").click(function () {
        $(".addPlaylist").hide();
      })
    })
    $(document).ready(function () {
      $(".confirm").click(function () {
        $(".addPlaylist").hide();
        var playlistName = form.playlistName.value;
        $.ajax({
          "url"     :"CSXUserServlet?opr=addPlaylist",
          "data"    :{"id":${user.id},"playlistName":playlistName},
          "type"    :"POST",
          "dataType":"JSON",
          "success" : function (data) {
            if(data==false){
              alert("歌单名不能为空！！！！！");
            }else{
              // console.log(data);
              var playlist = data[0];
              $(".userMyPlaylist").prepend("<div class=\"setPlaylist\" style=\"display: block\"><ul class=\"playlist-item list-group no-radius m-b-none m-t-n-xxs list-group-lg no-border\"><li class=\"list-group-item\">\n" +
                      "                      <a href=\"#\" class=\"thumb-sm pull-left m-r-sm\">\n" +
                      "                      <img src="+playlist.playlistPoster+" class=\"img-circle\">\n" +
                      "                      </a>\n" +
                      "                      <a href=\"#\" class=\"clear\">\n" +
                      "                      <small class=\"pull-right\">歌曲("+playlist.songCount+")</small>\n" +
                      "                      <strong class=\"block\">"+playlist.playlistName+"</strong>\n" +
                      "                      <small>播放量:"+playlist.playlistPlaycount+"</small></a></li></ul></div>")
            }
          }
        })
      })
    })

    /*$.ajax({
      "url"     :"",
      "data"    :"",
      "type"    :"GET",
      "dataType":"JSON",
      "success" : function () {

      }
    })*/
    //点击获取歌单的ID
    $(document).ready(function () {
      $(".palylist").click(function () {
        var playlistId=$(this).attr("playlistId")
        //alert(playlistId);
        window.location.href="music/playlist?id="+playlistId;
      })
    })

    //点击获取歌曲的ID
    $(document).ready(function () {
      $(".userSongs").click(function () {
        var userSongsId=$(this).attr("userSongsId")
        //alert(userSongsId)
        window.location.href="music/song?id="+userSongsId;
      })
    })

    //点击获取专辑的ID
    $(document).ready(function () {
      $(".userAlbum").click(function () {
        var userAlbumId=$(this).attr("userAlbumId")
        //alert(userAlbumId);
        window.location.href="music/album?id="+userAlbumId;
      })
    })

    //点击获取我自己创建的歌单的ID
    $(document).ready(function () {
      $(".mySetPlaylist").click(function () {
        var mySetPlaylistId=$(this).attr("mySetPlaylistId")
        //alert(userAlbumId);
        window.location.href="music/playlist?id="+mySetPlaylistId;
      })
    })

    //点击获取关注的歌手的ID
    $(document).ready(function () {
      $(".focusSinger").click(function () {
        var focusSingerId=$(this).attr("focusSingerId")
        //alert(focusSingerId);
        window.location.href="GetSingerDetaiServlet?opr=showDetail&singer_id="+focusSingerId;
      })
    })
</script>